<template>
  <div class="wrap">
    <div class="title_box">
      <icon-menu-unfold
        :size="20"
        class="fold_icon"
        v-if="informationStore.isShowInformationTypeCard"
        @click="informationStore.isShowInformationTypeCard = false"
      />
      <icon-menu-fold :size="20" class="fold_icon" v-else @click="informationStore.isShowInformationTypeCard = true" />
      字典数据({{ informationStore.currentTypeActiveRow.dictTypeName }})
    </div>
    <br />
    <div class="utils_box">
      <div class="operation_btn_box">
        <a-button type="primary" @click="addInformationClick">
          <template #icon>
            <icon-plus />
          </template>
          新增
        </a-button>
        <!-- <a-button type="primary" status="danger" style="margin-left: 10px">
          <template #icon>
            <icon-delete />
          </template>
          删除
        </a-button> -->
      </div>
      <div class="search_box">
        <a-form :model="informationStore.$state.currentTypeActiveRow" :style="{ width: '740px' }" layout="inline">
          <a-form-item label="字典名称">
            <a-input
              :style="{ width: '156px' }"
              placeholder="请输入字典名称"
              v-model="informationStore.informationSearchKeywrod"
              allow-clear
            ></a-input>
          </a-form-item>
          <a-form-item label="字典编码">
            <a-input
              :style="{ width: '156px' }"
              placeholder="请输字典编码"
              v-model="informationStore.informationSearchCodeKeywrod"
              allow-clear
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" type="primary" @click="informationStore.informationTableSearchClick">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button
              status="danger"
              type="primary"
              @click="informationStore.informationTableResetClick"
              style="margin-left: 10px"
            >
              <template #icon>
                <icon-loop />
              </template>
              重置
            </a-button>
          </a-form-item>
        </a-form>
        <!-- <a-input
          :style="{ width: '246px' }"
          placeholder="请输入关键字"
          v-model="informationStore.informationSearchKeywrod"
          allow-clear
          @input="informationStore.typeSearchInput"
          @clear="informationStore.typeSearchInputClear"
        ></a-input>
        <a-button style="margin-left: 10px" type="primary">查询</a-button> -->
      </div>
    </div>
    <div class="table_box">
      <a-table
        :loading="informationStore.isInformationTableLoading"
        :data="informationStore.informationList"
        :columns="informationTableColumns"
        :pagination="{
          total: informationStore.total,
          current: informationStore.current,
          pageSize: informationStore.size
        }"
        @page-change="informationStore.currentPageChange"
        :bordered="{ cell: true }"
        style="margin-top: 10px"
      >
        <!-- 序号插槽 -->
        <template #index="{ rowIndex }">
          <span>{{ (informationStore.current - 1) * 10 + (rowIndex + 1) }}</span>
        </template>

        <!-- 状态插槽 -->
        <template #status="{ rowIndex }">
          <a-tag
            style="border-radius: 4px"
            v-if="informationStore.informationList[rowIndex].status == 1"
            color="#00b42a"
            >启用</a-tag
          >
          <a-tag style="border-radius: 4px" v-else color="#f53f3f">禁用</a-tag>
        </template>

        <!-- 操作插槽 -->
        <template #operation="{ rowIndex }">
          <div class="btn_box">
            <!-- 编辑按钮 -->
            <a-button
              size="small"
              type="primary"
              @click="informationEditClick(informationStore.informationList[rowIndex])"
            >
              编辑</a-button
            >
            <!-- 删除按钮 -->
            <a-popconfirm
              :content="`确定要${informationStore.informationList[rowIndex].status == 0 ? '启用' : '禁用'}吗？`"
              :type="`${informationStore.informationList[rowIndex].status == 0 ? 'success' : 'error'}`"
              @ok="informationDisableOrEnableClick(informationStore.informationList[rowIndex])"
            >
              <a-button
                size="small"
                type="primary"
                :status="`${informationStore.informationList[rowIndex].status == 0 ? 'success' : 'danger'}`"
                style="margin-left: 10px"
              >
                {{ informationStore.informationList[rowIndex].status == 0 ? '启用' : '禁用' }}
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>

    <!-- 添加字典数据的弹窗 -->
    <a-modal
      v-model:visible="informationStore.isShowAddInformation"
      @ok="addInformationModalOkClick"
      @cancel="addInformationModalCancelClick"
    >
      <template #title> 添加字典数据 </template>
      <div class="addInformationNameModal_box">
        <a-form :model="{}" :style="{ width: '480px' }">
          <a-form-item label="字典数据名称">
            <a-input
              v-model="addInformationForm.dictName"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="字典数据值">
            <a-input
              v-model="addInformationForm.dictValue"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="字典数据备注">
            <a-textarea
              v-model="addInformationForm.dictDesc"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 编辑字典数据的弹窗 -->
    <a-modal
      v-model:visible="informationStore.isShowEditInformation"
      @ok="editInformationModalOkClick"
      @cancel="editInformationModalCancelClick"
    >
      <template #title> 编辑字典数据 </template>
      <div class="addInformationNameModal_box">
        <a-form :model="{}" :style="{ width: '480px' }">
          <a-form-item label="字典数据名称">
            <a-input
              v-model="editInformationForm.dictName"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="字典数据值">
            <a-input
              v-model="editInformationForm.dictValue"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="字典数据备注">
            <a-textarea
              v-model="editInformationForm.dictDesc"
              style="width: 300px"
              placeholder="请输入字典数据名称"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'Content'
})
</script>
<script lang="ts" setup>
// 引入
import { useInformationStore } from '@/store'
import {
  addInformationApi,
  editInformationApi,
  enableInformationApi,
  disableInformationApi
} from '@/apis/information/index'
import { Message } from '@arco-design/web-vue'
const informationStore = useInformationStore()

// 添加字典数据的新增绑定数据
const addInformationForm = ref({
  dictName: '',
  dictValue: '',
  dictDesc: '',
  dictTypeCode: informationStore.$state.currentTypeActiveRow.dictTypeCode
})

// 修改字典数据的编辑绑定的数据
const editInformationForm = ref({
  dictName: '',
  dictValue: '',
  dictDesc: '',
  dictCode: ''
})

// 字典数据渲染的表格的字段规则
const informationTableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: '20'
  },
  {
    title: '名称',
    dataIndex: 'dictName',
    slotName: 'dictName',
    align: 'center',
    width: '80'
  },
  {
    title: '字典编码',
    dataIndex: 'dictCode',
    slotName: 'dictCode',
    align: 'center',
    width: '80'
  },
  // {
  //   title: '类型编码',
  //   dataIndex: 'dictTypeCode',
  //   slotName: 'dictTypeCode',
  //   align: 'center',
  //   width: '80'
  // },
  {
    title: '值',
    dataIndex: 'dictValue',
    slotName: 'dictValue',
    align: 'center',
    width: '140'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    align: 'center',
    width: '10'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    slotName: 'createTime',
    align: 'center',
    width: '100'
  },
  {
    title: '备注',
    dataIndex: 'dictDesc',
    slotName: 'dictDesc',
    align: 'center',
    width: '100'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slotName: 'operation',
    align: 'center',
    width: '80'
  }
])

// 数据字典表格单个修改点击事件
const informationEditClick = (row: object) => {
  console.log(row)

  informationStore.isShowEditInformation = true
  editInformationForm.value.dictName = row.dictName
  editInformationForm.value.dictValue = row.dictValue
  editInformationForm.value.dictDesc = row.dictDesc
  editInformationForm.value.dictCode = row.dictCode

  // console.log('编辑')
}

// 新增字典数据的点击事件
const addInformationClick = () => {
  informationStore.isShowAddInformation = true
}

// 添加数据字典的弹窗的确定点击事件
const addInformationModalOkClick = async () => {
  console.log(addInformationForm.value)
  addInformationForm.value.dictTypeCode = informationStore.$state.currentTypeActiveRow.dictTypeCode
  // console.log(informationStore.$state.currentTypeActiveRow.dictTypeCode)

  await addInformationApi(addInformationForm.value)
    .then(() => {
      Message.success('添加成功')
      informationStore.getInformationListFunc()
    })
    .catch(() => {
      Message.error('添加失败')
    })
}

// 添加数据字典的弹窗的取消点击事件
const addInformationModalCancelClick = () => {
  informationStore.isShowAddInformation = false
}

// 修改字典数据的弹窗的确定点击事件
const editInformationModalOkClick = async () => {
  await editInformationApi(editInformationForm.value)
    .then(() => {
      Message.success('修改成功')
      informationStore.getInformationListFunc()
    })
    .catch(() => {
      Message.error('修改失败')
    })
}

// 修改字典数据的弹窗的取消点击事件
const editInformationModalCancelClick = () => {
  informationStore.isShowEditInformation = false
}

// 启用字典数据和禁用字典数据的按钮点击事件
const informationDisableOrEnableClick = async (row: object) => {
  console.log(row)
  /*
    status    1    0
    0--目前禁用    进入启用
    1--目前启用    进入禁用
  */
  if (row.status == 0) {
    console.log('启用')

    await enableInformationApi({ dictCode: row.dictCode })
      .then(() => {
        Message.success('启用成功')
      })
      .catch(() => {
        Message.success('启用失败')
      })
  } else {
    console.log('禁用')
    await disableInformationApi({ dictCode: row.dictCode })
      .then(() => {
        Message.success('禁用成功')
      })
      .catch(() => {
        Message.success('禁用失败')
      })
  }
  informationStore.getInformationListFunc()
}
// 初始化
onMounted(() => {})
</script>

<style scoped>
.wrap {
  padding: 0px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.title_box {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
}

.utils_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.addInformationNameModal_box {
  padding: 40px 0px 20px 20px;
  /* height: 120px; */
  /* display: flex; */
}

::v-deep .table_box .arco-input {
  box-sizing: border-box;
  text-align: center;
}

.fold_icon {
  position: absolute;
  top: 30px;
  left: 30px;
  cursor: pointer;
}
</style>
